<template>
	<view>
		<cu-custom :bgImage="imgData" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">演职员价位</block>
		</cu-custom>
		
		<view class="cu-list menu sm-border card-menu margin-top margin-bottom">
			<view class="cu-item" style="height: 90px; background-size: 100% 100%; 
			background-repeat: no-repeat; -moz-background-size:100% 100%;"  
			:style="[{backgroundImage:'url('+imgData+')'}]">
				<view class="content">
					<view class="flex flex-wrap">
						<text style="color: #fff;font-size: 40upx;font-weight: 300;transform: skew(-10deg, 0deg);
						position: relative;text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)">{{userPoject.name}}</text>
						<view class="basis-xl"></view>
						<text class="childTitle">共{{personNum}}个演职员</text>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 演职员列表
			</view>
		</view>
		<view class="cu-list menu-avatar" v-for="(item,index) in list" :key="index" >
			<view class="cu-item" @click="showDetail(item.id)" >
				<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.img+')'}]" @tap="ViewImage(item.img)">
					<view class="cu-tag badge" :class="item.sex=='0'?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view>
				</view>
				<view class="content">
					<view class="text-grey">
						<view class="text-pink"><view class="text-grey">{{item.name}}</view></view>
						<view class="cu-tag round bg-orange sm">{{item.talent}}</view>
					</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">
							<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> -->
							{{item.remark}}
						</view> </view>
				</view>
				<view class="action">
					<view class="text-grey text-xs">{{item.position}}</view>
				</view>
			</view>
			<view class="cu-list menu sm-border card-menu margin-top margin-bottom" v-if="isShow&&showId==item.id">
				<view class="cu-item" v-for="(item,index) in childList" :key="index">
					<view class="content">
						<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
						<text class="text-grey">{{item.name}}</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-orange light">￥{{item.price}}</view>
					</view>
				</view>
				<view class="cu-item" v-if="childList.length<=0" :key="index">
					<view class="content">
						<text class="cuIcon-roundclose text-red  margin-right-xs"></text>
						<text class="text-grey">暂无价目子项，请去管理页面添加</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				isShow: false,
				showId: '',
				list: [],
				imgData: '',
				userPoject: {},
				childList: [],
				personNum: 0
			};
		},
		onLoad() {
			this.showUser()
			this.showUserList()
		},
		methods: {
			ViewImage(img) {
				let imgList = []
				imgList.push(img)
				uni.previewImage({
					urls: imgList,
					current: imgList[0]
				});
			},
			showDetail(id) {
				if(this.showId === id) {
					this.isShow = !this.isShow
					if(!this.isShow) {
						uni.request({
							url: this.serverPath + 'user/postChildUserListById',
							method: 'POST',
							header:{
								'Content-type':'application/x-www-form-urlencoded'
							},
							data: {
								id: id
							},
							success:(res)=> {
								this.childList = res.data.data
							}
						})
					}
				} else {
					if(!this.isShow) {
						this.isShow = true
					}
					uni.request({
						url: this.serverPath + 'user/postChildUserListById',
						method: 'POST',
						header:{
							'Content-type':'application/x-www-form-urlencoded'
						},
						data: {
							id: id
						},
						success:(res)=> {
							this.childList = res.data.data
						}
					})
					this.showId = id
				}
			},
			showUser() {
				uni.request({
					url: this.serverPath + 'project/postProjectById',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
						id: 1
					},
					success:(res)=> {
						this.userPoject = res.data.data
						this.imgData = this.userPoject.img
					}
				})
			},
			showUserList() {
				uni.request({
					url: this.serverPath + 'user/postShowUserList',
					method: 'POST',
					header:{
						'Content-type':'application/x-www-form-urlencoded'
					},
					success:(res)=> {
						this.list = res.data.data
						this.personNum = this.list.length
					}
				})
			}
		}
	}
</script>

<style>
	.cu-list+.cu-list {
	    margin-top: unset;
	}
	.action {
		right: 20upx;
	}
	.cardTitle {
		color: #fff;
		font-size: 40upx;
		font-weight: 300;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	.childTitle {
		color: #fff;
		font-size: 28upx;
		font-weight: 200;
		transform: skew(-10deg, 0deg);
		position: relative;
		text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3)
	}
	.right {
		margin-right: 10upx;
	}

	.indexes {
		position: relative;
	}

	.indexBar {
		position: fixed;
		right: 0px;
		bottom: 0px;
		padding: 20upx 20upx 20upx 60upx;
		display: flex;
		align-items: center;
	}

	.indexBar .indexBar-box {
		width: 40upx;
		height: auto;
		background: #fff;
		display: flex;
		flex-direction: column;
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.1);
		border-radius: 10upx;
	}

	.indexBar-item {
		flex: 1;
		width: 40upx;
		height: 40upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		color: #888;
	}

	movable-view.indexBar-item {
		width: 40upx;
		height: 40upx;
		z-index: 9;
		position: relative;
	}

	movable-view.indexBar-item::before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 10upx;
		height: 20upx;
		width: 4upx;
		background-color: #f37b1d;
	}

	.indexToast {
		position: fixed;
		top: 0;
		right: 80upx;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		margin: auto;
		color: #fff;
		line-height: 100upx;
		text-align: center;
		font-size: 48upx;
	}
</style>
